import 'package:flutter/material.dart';

class BlendRepeatPage extends StatefulWidget {
  const BlendRepeatPage({super.key});

  @override
  State<BlendRepeatPage> createState() => _BlendRepeatPageState();
}

class _BlendRepeatPageState extends State<BlendRepeatPage> {
  final List<BlendMode> blendModes = BlendMode.values;
  final List<ImageRepeat> repeatModes = ImageRepeat.values;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('混合模式 & 重复效果'),
          bottom: const TabBar(tabs: [Tab(text: '混合模式'), Tab(text: '重复效果')]),
        ),
        body: TabBarView(
          children: [_buildBlendModeList(), _buildRepeatModeList()],
        ),
      ),
    );
  }

  Widget _buildBlendModeList() {
    return ListView.builder(
      itemCount: blendModes.length,
      itemBuilder: (context, index) {
        final mode = blendModes[index];
        return Column(
          children: [
            Container(
              height: 500,
              width: 695,
              margin: const EdgeInsets.all(8),
              child: Image.network(
                "https://img2.baidu.com/it/u=1852044603,1166589216&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=695",
                color: Colors.blue.withOpacity(0.5),
                colorBlendMode: mode,
                errorBuilder:
                    (context, error, stackTrace) => const Icon(Icons.error),
              ),
            ),
            Text(
              mode.toString().split('.').last,
              style: const TextStyle(fontSize: 16),
            ),
            const Divider(),
          ],
        );
      },
    );
  }

  Widget _buildRepeatModeList() {
    return ListView.builder(
      itemCount: repeatModes.length,
      itemBuilder: (context, index) {
        final mode = repeatModes[index];
        return Column(
          children: [
            Container(
              height: 200,
              width: double.infinity,
              margin: const EdgeInsets.all(8),
              child: Image.network(
                'https://picsum.photos/100/100',
                repeat: mode,
                errorBuilder:
                    (context, error, stackTrace) => const Icon(Icons.error),
              ),
            ),
            Text(
              mode.toString().split('.').last,
              style: const TextStyle(fontSize: 16),
            ),
            const Divider(),
          ],
        );
      },
    );
  }
}
